<div [formGroup]="configuration.formGroupReference">
    <label [ngClass]="configuration.iconLabel ? 'd-flex' : 'row'">
        <span *ngIf="configuration.iconLabel" class="input-group-text h-100 d-block">
            <em class="fa" [ngClass]="configuration.iconLabel"></em
        ></span>
        <span *ngIf="!configuration.iconLabel" class="col-4 col-form-label">
            {{ labelTranslationKey | translate }} {{ configuration.required ? "*" : "" }}
        </span>
        <span *ngIf="isDisabled" class="col-8 text-dark">{{ currentValue }}</span>
        <span *ngIf="!isDisabled" class="col" [ngClass]="configuration.iconLabel ? 'p-0' : ''">
            <input
                type="email"
                [ngClass]="configuration.showArrow ? '' : 'input-number-no-arrows'"
                [formControlName]="configuration.formControlId"
                class="form-control qa-{{ configuration.qaPrefix }}-{{ configuration.formControlId }}"
                placeholder="{{ labelTranslationKey | translate }}"
                [required]="configuration.required"
            />
            <app-form-input-error
                class="invalid-feedback"
                [formGroupReference]="configuration.formGroupReference"
                [formControlId]="configuration.formControlId"
            >
            </app-form-input-error>
        </span>
    </label>
</div>
